<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./style/font-awesome.min.css" />
    <link rel="stylesheet" href="./style/animate.css" />
    <link rel="stylesheet" href="./style/reset.css" />
    <link rel="stylesheet" href="./style/index.css" />
    <script src="./js/wow.min.js"></script>
    <script type="text/javascript">
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 750) {
                        docEl.style.fontSize ='12px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                    }
                };
            // Abort if browser does not support addEventListener
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
</head>
<body>
    <div class="container">
        <header class="header clear">
            <a class="wow rubberBand logo" href="javascript:void(0)" data-wow-duration="1s">
                <img src="./images/logo.png" />
            </a>
            <div class="wow fadeIn search" data-wow-duration="1s">
                <input type="text" name="search" placeholder="请输入商品名称" />
                <i class="fa fa-search fa-3x"></i>
            </div>
            <div class="wow bounceInRight city" data-wow-duration="1s">
                广州市
            </div>
        </header>
        <input type="radio" name="img" id="img1" checked>
        <input type="radio" name="img" id="img2">
        <input type="radio" name="img" id="img3">
        <div class="wow bounceIn banner " data-wow-duration="1s">
            <div class="banner-image1 ">
                <img src="./images/banner-img1.png" />
            </div>
            <div class="banner-image2 ">
                <img src="./images/banner-img2.png" />
            </div>
            <div class="banner-image3 ">
                <img src="./images/banner-img3.png" />
            </div>
            <div class="roll">
                <label for="img1"><span></span></label>
                <label for="img2"><span></span></label>
                <label for="img3"><span></span></label>
            </div>
        </div>
        <div class="product">
            <div class="product-title clear">
                <h3 class="wow bounceInLeft" data-wow-duration="1s">优惠活动</h3>
                <a class="wow bounceInRight" data-wow-duration="1s" href="javascript:void(0)">更多<i class="fa fa-arrow-circle-right fa-lg"></i></a>
            </div>
            <div class="product-list">
                <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="100ms">
                    <a class="image"><img src="./images/product-img.png" /></a>
                </div>
                <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="300ms">
                    <a class="image"><img src="./images/product-img2.png" /></a>
                </div>
                <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="500ms">
                    <a class="image"><img src="./images/product-img3.png" /></a>
                </div>
                <div class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="7s00ms">
                    <a class="image"><img src="./images/product-img4.png" /></a>
                </div>
            </div>
        </div>
        <div class="goods">
            <div class="goods-title clear">
                <h3 class="wow bounceInLeft" data-wow-duration="1s"><i class="fa fa-heart fa-2x"></i><span>猜你喜欢</span></h3>
                <a class="wow bounceInRight" data-wow-duration="1s" href="javascript:void(0)">更多<i class="fa fa-arrow-circle-right fa-lg"></i></a>
            </div>
            <div class="goods-list">
                <div class="wow bounceInDown clear" data-wow-duration="1s">
                    <div class="goods-img"><img src="./images/goods-img.png" /></div>
                    <div class="goods-box">
                        <ul>
                            <li><a href="#">万岁寿司（正佳店）</a><span> &lt;100m </span></li>
                            <li>[100店通用]双人套餐</li>
                            <li><span>￥88.00</span><span>已售1000</span></li>
                        </ul>
                    </div>
                </div>
                <div class="wow bounceInDown clear" data-wow-duration="1s">
                    <div class="goods-img"><img src="./images/goods-img.png" /></div>
                    <div class="goods-box">
                        <ul>
                            <li><a href="#">万岁寿司（正佳店）</a><span> &lt;100m </span></li>
                            <li>[100店通用]双人套餐</li>
                            <li><span>￥88.00</span><span>已售1000</span></li>
                        </ul>
                    </div>
                </div>
                <div class="wow bounceInDown clear" data-wow-duration="1s">
                    <div class="goods-img"><img src="./images/goods-img.png" /></div>
                    <div class="goods-box">
                        <ul>
                            <li><a href="#">万岁寿司（正佳店）</a><span> &lt;100m </span></li>
                            <li>[100店通用]双人套餐</li>
                            <li><span>￥88.00</span><span>已售1000</span></li>
                        </ul>
                    </div>
                </div>
                <div class="wow bounceInDown clear" data-wow-duration="1s">
                    <div class="goods-img"><img src="./images/goods-img.png" /></div>
                    <div class="goods-box">
                        <ul>
                            <li><a href="#">万岁寿司（正佳店）</a><span> &lt;100m </span></li>
                            <li>[100店通用]双人套餐</li>
                            <li><span>￥88.00</span><span>已售1000</span></li>
                        </ul>
                    </div>
                </div>
                <div class="wow bounceInDown clear" data-wow-duration="1s">
                    <div class="goods-img"><img src="./images/goods-img.png" /></div>
                    <div class="goods-box">
                        <ul>
                            <li><a href="#">万岁寿司（正佳店）</a><span> &lt;100m </span></li>
                            <li>[100店通用]双人套餐</li>
                            <li><span>￥88.00</span><span>已售1000</span></li>
                        </ul>
                    </div>
                </div>
                <div class="wow bounceInDown clear" data-wow-duration="1s">
                    <div class="goods-img"><img src="./images/goods-img.png" /></div>
                    <div class="goods-box">
                        <ul>
                            <li><a href="#">万岁寿司（正佳店）</a><span> &lt;100m </span></li>
                            <li>[100店通用]双人套餐</li>
                            <li><span>￥88.00</span><span>已售1000</span></li>
                        </ul>
                    </div>
                </div>
                <div class="wow bounceInDown clear" data-wow-duration="1s">
                    <div class="goods-img"><img src="./images/goods-img.png" /></div>
                    <div class="goods-box">
                        <ul>
                            <li><a href="#">万岁寿司（正佳店）</a><span> &lt;100m </span></li>
                            <li>[100店通用]双人套餐</li>
                            <li><span>￥88.00</span><span>已售1000</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <footer class="wow rubberBand footer" data-wow-duration="1s">
            <a href="./index.html">
                <img src="./images/footer-img-check.png" />
                <span>首页</span>
            </a>
            <a href="./classify.html">
                <img src="./images/footer-img2.png" />
                <span>分类</span>
            </a>
            <a href="./discover.html">
                <img src="./images/footer-img3.png" />
                <span>发现</span>
            </a>
            <a href="./me.html">
                <img src="./images/footer-img4.png" />
                <span>我的</span>
            </a>
        </footer>
    </div>
</body>
</html>
<script>
        //初始化懒加载
        new WOW().init();
</script>